<template>
	<view class="me-page">
		<view class="me-info-card">
			<view class="me-info">
				<fui-avatar text="T"></fui-avatar>
				<view class="info">
					<view class="name">tartaglia</view>
					<view class="id">id: 123456</view>
				</view>
			</view>
		</view>
		<fui-card title="我的订单" tag="全部订单>" showBorder :margin="['-360rpx', '.5rem', 0,'.5rem']" shadow>
			<view class="y-box">
				<fui-grid :columns="5" :show-border="false">
					<fui-grid-item v-for="(item,i) in orderCates" :key="i" @tap="toOrderPage">
						<view class="me-order-item">
							<fui-icon :name="item.icon" :size="60" color="#999"></fui-icon>
							<view>{{item.name}}</view>
						</view>

					</fui-grid-item>
				</fui-grid>
			</view>
		</fui-card>
		<div style="padding-top: 380rpx;"></div>
		<fui-card :margin="[0, '.5rem']">
			<fui-list :bottomBorder="false" :topBorder="false">
				<fui-list-cell arrow background="transparent">收货地址</fui-list-cell>
				<fui-list-cell arrow background="transparent">优惠卷</fui-list-cell>
				<fui-list-cell arrow background="transparent" :bottomBorder="false">积分</fui-list-cell>
			</fui-list>
		</fui-card>
	</view>
</template>

<script>
	import card from './card.vue'
	export default {

		data() {
			return {
				orderCates: [{
						name: '代付款',
						icon: 'payment'
					},
					{
						name: '运送中',
						icon: 'transport'
					},
					{
						name: '待收货',
						icon: 'receive'
					},
					{
						name: '待评价',
						icon: 'comment'
					},
					{
						name: '售后',
						icon: 'aftersale'
					},
				]
			}
		},
		components: {
			card
		},
		methods: {
			toOrderPage() {
				uni.navigateTo({
					url: '/pages/order/order'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.me-page {
		min-height: 100vh;
		background: #f5f5f5;
	}

	.me-info-card {
		background-image: url('https://cdn-we-retail.ym.tencent.com/miniapp/template/user-center-bg-v1.png');
		padding-top: 250rpx;
	}

	.me-info {
		margin: 0 .5rem;
		display: flex;
		height: 480rpx;

		.info {
			margin-left: .5rem;

			.name {
				font-size: 1.2rem;
				color: #fff;
				font-weight: 700;
			}

			.id {
				font-size: .8rem;
				color: #d81e06
			}
		}
	}


	.me-order-item {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: .7rem;
	}

	.x-box {
		padding: 20rpx;
		text-align: center;
		font-size: 20rpx;
	}

	.y-box {
		text-align: center;
		font-size: 20rpx;
		padding: 20rpx 10rpx;
	}
</style>